<template>
	<div class="ring_list">
		<!-- 铃声设置 -->
		<div class='free_nav'>
			<router-link to="/layout/found"><img src="../../../assets/icon-close45.png"></router-link>		
			<span>铃声设置</span>
		</div>

		<div class="ring_message">
			<img src="../../../assets/biaoqian.png">
			<div class="ring_name">
				<p>小情歌</p>
				<p>吴青峰</p>
			</div>
		</div>
		<div class="ring_name_list">
			<span>更多歌曲</span>
			<div>
				<img src="../../../assets/icon-next32.png">
			</div>	
		</div>
		<!-- ...................................................... -->
		<div class="listen_tab">
			<div>40秒截取</div>
			<div>整首截取</div>
		</div>
		<!-- .......................................................... -->
		<div class="ring_time">
			<p>0.1:00|04:33</p>
			<img src="../../../assets/yinyue.png">
		</div>
		<!-- ........................................................... -->
		<div class="set_ring">
			<div>
				<img src="../../../assets/icon-playbiaoqian.png">
			</div>
			<div class="btn">
				<button>设为来电铃声</button>
				<button>设为闹钟铃声</button>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name:'ringSet',
		data(){
			return{
				
			}
		}
	}
</script>
<style scoped lang="Less">
.ring_list{
	width: 100%;
	overflow: hidden;
}
.play_reg{
	width: 100%;
	overflow: hidden;
}
.free_nav{
	width: 100%;
	height: 88 / 100rem;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	background: url('../../../assets/daohang.png');
	background-size: 100%;
}

.free_nav img{
	width: 40 / 100rem;
	height: 40 / 100rem;
	display: inline-block;
    margin-left: 20 / 100rem;
    margin-top:  26 / 100rem;

}
.free_nav span{
	display: inline-block;
	margin-left: 238 / 100rem;
	font-size: 36 / 100rem;
	color: #ffffff;
}
.ring_message{
	width:100%;
	height: 180 / 100rem;
	margin-top: 122 / 100rem;
	position: relative;
}
.ring_message img{
	position: absolute;
    left:20 / 100rem; 
}
.ring_name{
  width: 85 / 100rem;
  height: 67 / 100rem;
  position: absolute;
  left: 226 / 100rem;
  margin-top: 58 / 100rem;
   text-align: center;
}
.ring_name p:nth-child(2){
	margin-top: 16 / 100rem;
	font-size: 20 / 100rem;
}
.ring_name_list{
	width:150 / 100rem;
	height: 40 / 100rem;
	line-height: 40 / 100rem;
	font-size: 24 / 100rem;
    display: inline-block;
    position: relative;
    float: right;
    right: 20 / 100rem;
}
.ring_name_list img{
	display: inline-block;
	width: 20 / 100rem;
	height: 30 / 100rem;
	margin-left: 26 / 100rem;
	
}
.ring_name_list div{
	margin-top: 5 / 100rem;
	position: absolute;
	right: 0;
	bottom: -3 / 100rem;
}
/*。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
.listen_tab{
	width: 100%;
	height: 80 / 100rem;
	margin-top: 40 / 100rem;
}
.listen_tab div{
	width: 50%;
	height:80 / 100rem;
	text-align: center;
	float: left;
	line-height: 80 / 100rem;
}
.listen_tab div:nth-child(1){
	border-bottom: 4px solid #c896f4;
	color: #c995f5;
	font-size:  30 / 100rem;
}
.listen_tab div:nth-child(2){
    color: #333333;
	font-size:  30 / 100rem;
}
/*.................................................*/
.ring_time{
	width: 100%;
	text-align: center;
	margin-top: 50 / 100rem;
}
.ring_time img{
	margin-top: 32 / 100rem;
	width: 668 / 100rem;
	height: 400 / 100rem;
}
/*......................................*/
.set_ring {
	width: 100%;
	margin-top: 70 / 100rem;
	text-align: center;
}
.set_ring img{
   width: 78 / 100rem;
   height: 78 / 100rem;
}
.btn{
	margin: 68 / 100rem;
}
button{
	width: 245 / 100rem;
	height: 64 / 100rem;
	border-radius: 20 / 100rem;
	background-color: #ffffff;
}
button:nth-child(2){
	margin-left: 56 / 100rem;
}
button:nth-child(1){
	border:1px soild #c997f6;
	color: #c997f6;
}
	
</style>